ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা কাস্টম থিম তৈরি করার জন্য CSS এবং SASS সাপোর্ট প্রদান করে। থিমিং ব্যবহারের মাধ্যমে আপনি আপনার অ্যাপ্লিকেশনের ডিজাইন এবং ভিজ্যুয়াল স্টাইল কাস্টমাইজ করতে পারেন। থিমিং সিস্টেমটি ব্যবহার করে, আপনি অ্যাপ্লিকেশনের ভিজ্যুয়াল উপাদানগুলো যেমন রঙ, টাইপোগ্রাফি, বর্ডার, প্যাডিং ইত্যাদি কাস্টমাইজ করতে পারবেন। CSS এবং SASS ব্যবহার করে থিম তৈরি করা, বিশেষত বড় অ্যাপ্লিকেশনে স্টাইলিং নিয়ন্ত্রণের ক্ষেত্রে একটি কার্যকরী উপায়।
১. ExtJS থিমিং এবং কাস্টম CSS
ExtJS ফ্রেমওয়ার্কের জন্য কাস্টম CSS ব্যবহার করে থিম তৈরি করা খুবই সহজ। ExtJS তে ext-theme-classic বা ext-theme-material এর মতো ডিফল্ট থিম পাওয়া যায়, তবে আপনি নিজস্ব থিম তৈরি করতে পারেন যা আপনার অ্যাপ্লিকেশনের ডিজাইনের সাথে মিলে যাবে।
Custom CSS ব্যবহার করে থিমিং:
কাস্টম CSS ফাইল তৈরি করা: আপনার অ্যাপ্লিকেশনে একটি নতুন CSS ফাইল তৈরি করুন যেখানে আপনি বিভিন্ন UI কম্পোনেন্টের স্টাইল কাস্টমাইজ করবেন।
custom-theme.cssউদাহরণ:.x-panel-body { background-color: #f4f4f4; /* প্যানেল ব্যাকগ্রাউন্ড */ } .x-btn { background-color: #007BFF; /* বাটনের ব্যাকগ্রাউন্ড রঙ */ color: white; /* টেক্সট রঙ */ border-radius: 5px; /* বর্ডার রাউন্ডিং */ } .x-btn:hover { background-color: #0056b3; /* হোভার রঙ */ } .x-field-label { font-weight: bold; /* ইনপুট ফিল্ডের লেবেল স্টাইল */ color: #333; }CSS ফাইলকে লিঙ্ক করা: আপনার
index.htmlফাইলে CSS ফাইলটিকে লিঙ্ক করুন।<link rel="stylesheet" type="text/css" href="css/custom-theme.css">কাস্টম ক্লাস ব্যবহার করা: আপনার কম্পোনেন্টের স্টাইল কাস্টমাইজ করতে আপনি কাস্টম CSS ক্লাসগুলি ব্যবহার করতে পারেন।
Ext.create('Ext.button.Button', { text: 'Click Me', cls: 'x-btn custom-button', // কাস্টম ক্লাস যোগ করা renderTo: Ext.getBody() });
২. SASS ব্যবহার করে থিমিং
SASS (Syntactically Awesome Stylesheets) হল একটি শক্তিশালী CSS প্রিপ্রসেসর যা স্টাইলশিট লেখার সময় আরও কার্যকরী এবং মডুলার কোড তৈরি করতে সাহায্য করে। ExtJS SASS ব্যবহার করে থিম তৈরি করার জন্য অনেক উপায় প্রদান করে।
SASS সেটআপ এবং কাস্টম থিম তৈরি করা
SASS ফাইল সেটআপ: প্রথমে, আপনাকে SASS ফাইলগুলির জন্য একটি কনফিগারেশন তৈরি করতে হবে।
ext.scssফাইল তৈরি করুন যেখানে ExtJS এর থিম কাস্টমাইজ করা হবে।ext.scssফাইলের উদাহরণ:// Import ExtJS default variables @import 'extjs/theme-material/resources/theme-material-all'; // কাস্টম রঙ এবং অন্যান্য ভ্যারিয়েবল সেট করুন $primary-color: #FF5733; // পছন্দসই প্রাইমারি রঙ $secondary-color: #333333; // সেকেন্ডারি রঙ // UI কম্পোনেন্টের কাস্টমাইজেশন .x-btn { background-color: $primary-color; color: white; border-radius: 4px; &:hover { background-color: darken($primary-color, 10%); } } .x-panel-body { background-color: lighten($secondary-color, 30%); }SASS কম্পাইল করা: SASS কোডকে CSS তে রূপান্তর করতে আপনাকে SASS কম্পাইল করতে হবে। আপনি Node.js, Gulp, বা Webpack ব্যবহার করে এটি করতে পারেন।
যদি আপনি Node.js ব্যবহার করেন:
প্রথমে
node-sassইনস্টল করুন:npm install -g node-sassএরপর SASS ফাইলটি CSS এ কম্পাইল করুন:
node-sass ext.scss custom-theme.css
CSS লোড করা: আপনার অ্যাপ্লিকেশন
index.htmlফাইলে কম্পাইল করা CSS ফাইলটি লোড করুন:<link rel="stylesheet" type="text/css" href="css/custom-theme.css">
৩. ExtJS থিম কাস্টমাইজেশন এবং ExtJS থিম জেনারেটর
ExtJS থিম কাস্টমাইজ করার জন্য Sencha Cmd ব্যবহার করা যায়। Sencha Cmd একটি শক্তিশালী টুল যা ExtJS অ্যাপ্লিকেশন তৈরি, কম্পাইল এবং ডিপ্লয় করতে ব্যবহৃত হয়। এর মাধ্যমে আপনি কাস্টম থিম তৈরি করতে পারেন এবং সেটি এক্সটিজেএস প্রজেক্টে ব্যবহার করতে পারবেন।
Sencha Cmd দিয়ে থিম তৈরি: আপনি Sencha Cmd ব্যবহার করে একটি কাস্টম থিম তৈরি করতে পারেন। এটি আপনাকে থিমের জন্য প্রাথমিক ফাইল এবং কাঠামো প্রদান করবে।
কাস্টম থিম তৈরি করতে কমান্ড:
sencha generate theme MyCustomTheme- থিম কনফিগারেশন পরিবর্তন: কাস্টম থিমের জন্য সিএসএস বা সাস ফাইলগুলি সম্পাদনা করুন এবং আপনার প্রজেক্টে ব্যবহার করুন।
সারাংশ
ExtJS থিমিং একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য সিস্টেম, যা CSS এবং SASS এর মাধ্যমে আপনার অ্যাপ্লিকেশনের ডিজাইন এবং ইউজার ইন্টারফেস স্টাইল কাস্টমাইজ করতে সহায়ক। CSS ফাইল ব্যবহার করে সহজেই থিম কাস্টমাইজ করা যায়, তবে SASS ব্যবহার করে আরও শক্তিশালী এবং মডুলার থিম তৈরি করা যায়, যা বড় অ্যাপ্লিকেশনগুলিতে ব্যবহার করা যায়। Sencha Cmd ব্যবহার করে আপনি কাস্টম থিম তৈরি এবং রক্ষণাবেক্ষণ করতে পারেন।
Read more
